<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 页面上部 -->
        <el-row>
          <el-col :span="22">
            <span style="font-size: 12px; color: pink"
              >说明：目前支持学科和关键字条件筛选</span
            ></el-col
          >
          <el-col :span="2">
            <el-button type="success" size="small" style="width: 100%" @click="addarticle">
              <i class="el-icon-edit"></i>
              <span>新增试题</span>
            </el-button>
          </el-col>
        </el-row>

        <!-- form表单 -->
        <el-form :model="form" label-width="80px">
          <el-row :gutter="20" class="rowheight">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="学科" >
                  <el-select placeholder="请选择" style="width:100%" v-model="subjectvalue" @change="requestDirectory">
                    <el-option

                      v-for="item in subjectoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>

                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="二级目录">
                  <el-select placeholder="请选择" style="width:100%" v-model="directionstvalue" >
                    <el-option
                      v-for="item in directionsoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="标签">
                  <el-select placeholder="请选择" style="width:100%"  v-model="tagstvalue">
                    <el-option
                      v-for="item in tagsoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="关键字">
                  <el-input  placeholder="根据题干搜索" style="width:100%" v-model="keyword"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="rowheight">
              <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="试题类型">
                  <el-select placeholder="请选择" style="width:100%" v-model="questionTypetvalue">
                    <el-option
                      v-for="item in questiontypeoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="难度">
                  <el-select placeholder="请选择" style="width:100%" v-model="difficultyvalue">
                    <el-option
                      v-for="item in difficultyoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="方向">
                  <el-select placeholder="请选择" style="width:100%" v-model="directionvalue">
                    <el-option
                      v-for="item in directionoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="录入人">
                  <el-select placeholder="请选择" style="width:100%" v-model="uservalue">
                    <el-option
                      v-for="item in useroptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="rowheight">
              <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="题目备注">
                  <el-input   style="width:100%" v-model="remarks"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="企业简称">
                  <el-input   style="width:100%" v-model="shortName"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="2">
                <el-col :span="15">
                    <div class="grid-content bg-purple">
                      <el-form-item label="城市">
                        <el-select placeholder="请选择" v-model="provincesvalue" @change="getarea">
                          <el-option
                            v-for="item in provincesoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                </el-col>
                <el-col :span="9">
                    <div class="grid-content bg-purple">
                      <el-form-item label-width="0">
                        <el-select placeholder="请选择"   v-model="areavalue">
                          <el-option
                            v-for="item in areaoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                </el-col>
              </el-row>

            </el-col>
            <el-col :span="6" >
              <el-row :gutter="20" type="flex" justify="end">
                <el-col :span="5">
                  <div class="grid-content bg-purple">
                    <el-button @click="clear">清除</el-button>
                  </div>
                </el-col>
                 <el-col :span="5">
                  <div class="grid-content bg-purple">
                    <el-button type="primary" class="btn" @click="search">搜索</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>

        <el-alert

          :closable="false">
          <i class="el-icon-info"></i>
          数据一共{{total}}条
        </el-alert>
          <el-table :data="tableData" style="width: 100%" >
            <el-table-column  label="试题编号" prop="number" width="110"></el-table-column>
            <el-table-column  label="学科" prop="subject" width="120"></el-table-column>
            <el-table-column  label="目录" prop="catalog"></el-table-column>
            <el-table-column  label="题型" prop="questionType" :formatter="formatterQuestionType" ></el-table-column>
            <el-table-column  label="题干" prop="question"  width="300"></el-table-column>
            <el-table-column  label="录入时间" prop="addDate" width="180" :formatter="formatterAddDate"></el-table-column>
            <el-table-column  label="难度" prop="difficulty" :formatter="formatterDifficulty"></el-table-column>
            <el-table-column  label="录入人" prop="creator" width="120"></el-table-column>
            <el-table-column  fixed="right" label="操作" width="190">
              <template #default={row}>
              <el-button @click="showDialog(row)"  size="small" type="primary" icon="el-icon-view" circle plain  title="预览"></el-button>
              <el-button  size="small"  @click="update(row)"  type="success" icon="el-icon-edit" circle plain title="编辑"></el-button>
              <el-button  size="small"  @click="delQuestionsChoice(row)" type="danger" icon="el-icon-delete" circle plain title="删除"></el-button>
              <el-button  size="small" type="warning" icon="el-icon-check" circle plain title="加入精选" @click="addChoice(row)"></el-button>
              </template>
            </el-table-column>
          </el-table>

            <el-row >
                <el-col :span="24"><div class="grid-content bg-purple" style="text-align: right">
                  <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :pager-count="5"
                      :current-page="currentPage4"
                      :page-sizes="[5, 10, 20, 50]"
                      :page-size="pagesize"
                      layout=" sizes, prev, pager, next, jumper"
                       :total="total">
                  </el-pagination></div></el-col>
          </el-row>

          <articles-preview :dialogVisible.sync='dialogVisible' ref="articlespreview"></articles-preview>

      </el-card>
    </div>
  </div>
</template>

<script>
import articlesPreview from '../components/articles-preview.vue'
import { list as questionsApi, remove as removeApi, choiceAdd } from '@/api/hmmm/questions'
import dayjs from 'dayjs'
import { questionType as questionTYPE, difficulty } from '@/api/hmmm/constants'
import { simple as subjecSimpletListApi } from '@/api/hmmm/subjects'
import { simple as userSimpleListApi } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { simple as directorysSimpletListApi } from '@/api/hmmm/directorys'
import { simple as tagsSimpletListApi } from '@/api/hmmm/tags'

export default {
  components: { articlesPreview },
  name: 'questions',
  data () {
    return {
      dialogVisible: false,
      form: {},
      currentPage4: 1,
      pagesize: 5,
      total: 0,
      questionrequestdata: {},
      tableData: [],

      subjectoptions: [],
      directionsoptions: [],
      tagsoptions: [],
      questiontypeoptions: [
        {
          value: '1',
          label: '单选'
        },
        {
          value: '2',
          label: '多选'
        },
        {
          value: '3',
          label: '简答'
        }
      ],
      difficultyoptions: [
        {
          value: 1,
          label: '简单'
        },
        {
          value: 2,
          label: '一般'
        },
        {
          value: 3,
          label: '困难'
        }
      ],
      directionoptions: [
        {
          value: 'o2o',
          label: 'o2o'
        },
        {
          value: '外包服务',
          label: '外包服务'
        },
        {
          value: '企业服务',
          label: '企业服务'
        },
        {
          value: '互联网金融',
          label: '互联网金融'
        },
        {
          value: '企业咨询',
          label: '企业咨询'
        },
        {
          value: '互联网',
          label: '互联网'
        },
        {
          value: '电子商务',
          label: '电子商务'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      useroptions: [],
      provincesoptions: [],
      areaoptions: [],
      subjectvalue: '',
      directionstvalue: '',
      tagstvalue: '',
      questionTypetvalue: '',
      difficultyvalue: '',
      directionvalue: '',
      uservalue: '',
      provincesvalue: '',
      areavalue: '',
      keyword: '',
      remarks: '',
      shortName: ''
    }
  },
  created () {
    this.questions()
    this.subjecSimpletList()
    this.userSimpleList()
    this.provincescity()
  },
  methods: {
    /**
     * 搜索
     */
    async search () {
      if (this.subjectvalue === '' && this.keyword === '') {
        this.questions()
      } else if (this.subjectvalue === '') {
        this.questionrequestdata = {
          page: this.currentPage4,
          pagesize: this.pagesize,
          keyword: this.keyword
        }
        const { data: questionsdata } = await questionsApi(this.questionrequestdata)
        // console.log(questionsdata)
        const basicdata = questionsdata.items
        this.formatterQuestion(basicdata)

        this.tableData = basicdata
        console.log(basicdata)
        this.total = questionsdata.counts
      } else if (this.keyword === '') {
        this.questionrequestdata = {
          page: this.currentPage4,
          pagesize: this.pagesize,
          subjectID: this.subjectvalue

        }
        const { data: questionsdata } = await questionsApi(this.questionrequestdata)
        // console.log(questionsdata)
        const basicdata = questionsdata.items
        this.formatterQuestion(basicdata)

        this.tableData = basicdata
        console.log(basicdata)
        this.total = questionsdata.counts
      } else {
        this.questionrequestdata = {
          page: this.currentPage4,
          pagesize: this.pagesize,
          subjectID: this.subjectvalue,
          keyword: this.keyword

        }
        const { data: questionsdata } = await questionsApi(this.questionrequestdata)
        // console.log(questionsdata)
        const basicdata = questionsdata.items
        this.formatterQuestion(basicdata)

        this.tableData = basicdata
        console.log(basicdata)
        this.total = questionsdata.counts
      }
    },
    /**
     * 加入精选
     */
    addChoice (row) {
      this.$confirm('此题目将加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        const adddata = {
          choiceState: 1,
          id: row.id
        }
        const res = await choiceAdd(adddata)
        this.$message.success('加入成功')
        console.log(res)
        this.questions()
      }).catch(() => {

      })
    },
    /**
     * 获取基础题库数据
     */
    async questions () {
      this.questionrequestdata = {
        page: this.currentPage4,
        pagesize: this.pagesize
      }

      const { data: questionsdata } = await questionsApi(this.questionrequestdata)
      // console.log(questionsdata)
      const basicdata = questionsdata.items
      this.formatterQuestion(basicdata)

      this.tableData = basicdata
      console.log(basicdata)
      this.total = questionsdata.counts
    },
    /**
     * 打开预览框
     */
    showDialog (row) {
      this.dialogVisible = true

      this.$refs.articlespreview.rowdata = row
    },

    /**
     * 删除试题
     */
    delQuestionsChoice (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeApi(row)
        // console.log(res)

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.questions()
      }).catch(() => {

      })
    },
    /**
     * 修改试题
     */
    update (row) {
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      })
    },
    /**
     * 清除
     */
    clear () {
      this.subjectvalue = ''
      this.directionstvalue = ''
      this.tagstvalue = ''
      this.questionTypetvalue = ''
      this.difficultyvalue = ''
      this.directionvalue = ''
      this.uservalue = ''
      this.provincesvalue = ''
      this.areavalue = ''
      this.keyword = ''
      this.remarks = ''
      this.shortName = ''
    },
    /**
     * 新增试题，跳转试题录入
     */
    addarticle () {
      this.$router.push({
        path: 'new'
      })
    },
    /**
     * 获取选定学科下的目录
     */
    async requestDirectory (val) {
      const directiondata = {
        subjectID: val
      }

      const { data } = await directorysSimpletListApi(directiondata)
      const { data: tagsdata } = await tagsSimpletListApi(directiondata)
      // console.log(tagsdata)
      this.tagsoptions = tagsdata
      this.directionsoptions = data
    },
    /**
     * 获取所有学科
     */
    async subjecSimpletList () {
      const { data } = await subjecSimpletListApi()
      // console.log(data)
      this.subjectoptions = data
    },
    /**
     * 获取用户简单列表
     */
    async userSimpleList () {
      const { data: userdata } = await userSimpleListApi()
      // console.log(userdata)
      for (const item of userdata) {
        // console.log(item.username)
        const user = {
          value: `${item.id}`,
          label: item.username
        }
        this.useroptions.push(user)
      }
    },
    /**
     * 获取地区
     */
    getarea () {
      const areaarr = citys(this.provincesvalue)
      areaarr.forEach(item => {
        const areavalue = {
          label: item,
          value: item
        }
        this.areaoptions.push(areavalue)
      })
    },
    /**
     * 获取省市
     */
    provincescity () {
      const cityarr = provinces()
      cityarr.forEach(item => {
        const cityvalue = {
          label: item,
          value: item
        }
        this.provincesoptions.push(cityvalue)
      })
    },

    /**
     * 当前页面容量改变时调用
     */
    async handleSizeChange (val) {
      this.pagesize = val
      this.currentPage4 = 1
      this.questions()
    },
    /**
     * 页数改变时调用
     */
    async handleCurrentChange (val) {
      this.currentPage4 = val
      this.questions()
    },

    /**
     * 却除掉题干中的标签
     */
    formatterQuestion (data) {
      for (const item of data) {
        item.question = item.question.replace(/<.*?>/ig, '')
      }
    },

    /**
     * 使用枚举值处理题型
     */
    formatterQuestionType (row, column, cellValue, index) {
      const result = questionTYPE.find(item => item.value === cellValue)
      return result ? result.label : '未知'
    },
    /**
     * 处理时间
     */
    formatterAddDate (row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    /**
     * 使用枚举处理难度
     */
    formatterDifficulty (row, column, cellValue, index) {
      const result = difficulty.find(item => item.value === cellValue)
      return result ? result.label : '未知'
    }

  }

}
</script>

<style scoped lang="scss">
.btn{
  padding-right: 9px;
  text-align: center
}

.el-row {
  margin-bottom: 0px;
  &:last-child {
    margin-bottom: 0px;
  }
}
.el-col {
  border-radius: 4px;

}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
